---
id: 拆分配置
title: 配置拆分
---

属于优化配置，比如热模块更新，在进行打包时根本不需要运行，只在开发环境运行等等，我们在这里根据开发环境和生产环境进行拆分

## 安装 webpack-merge
``` webpack-merge ```

```js 
// webpack.dev.js

const webpack = require('webpack');
const { merge } = require('webpack-merge');
const WCommonConfig = require('./webpack.common.js');

const devConfig = {
    mode: 'development', // 模式（分为开发模式development，和生产模式production）
    devtool: 'cheap-module-source-map',
    devServer: {
        contentBase: './dist',
        // compress: true,
        port: 9000
    },

    plugins: [new webpack.HotModuleReplacementPlugin()]
}
module.exports = merge(WCommonConfig, devConfig)
```

```js 
// webpack.prod.js

const {merge} = require('webpack-merge');
const WCommonConfig = require('./webpack.common');
const prodConfig = {
	mode: 'development', // 模式（分为开发模式development，和生产模式production）
	devtool: 'cheap-module-source-map',
}
module.exports = merge(prodConfig, WCommonConfig)

```

```js
// webpack.common.js

const path = require('path');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    entry: {  // 入口文件配置
        main: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    }
                }
            },
            {
                test: /\.(jpg|jpeg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name]_[hash].[ext]',
                        outputPath: 'img/',
                        limit: 102400
                    }
                }
            },

            {
                test: /\.(css|scss)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 'sass-loader',
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [autoprefixer({
                                    overrideBrowserslist: [
                                        'last 10 Chrome versions',
                                        'last 5 Firefox versions',
                                        'Safari >= 6',
                                        'ie> 8'
                                    ]
                                })]
                            }

                        }
                    }
                ]
            }]
    },
    output: { // 输出文件配置
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
       
    ]
}
```
```js
//package.json

"script":{
    "start": "webpack-dev-server --config webpack-dev.js",
    "build": "webpack --config webpack-prod.js"
}

```

